<template>
	<view class="bg">
		<xl-navbar title="Grid宫格列表" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式</view>
			<xl-grid :items="items" col="4" @click="clickItem"></xl-grid>
			<view class="title">设置高度，字体、图标大小颜色，背景色</view>
			<xl-grid :items="items" col="4" height="120" fontSize="12" color="#bf956d" iconSize="24" iconColor="#bf956d" background="#f3f3f3"></xl-grid>
			<view class="title">添加分隔线，下划线</view>
			<xl-grid :items="items" col="3" divider border></xl-grid>
			<view class="title">设置右对齐</view>
			<xl-grid :items="items" col="4" align="right"></xl-grid>
			<view class="title">使用插槽</view>
			<xl-grid :items="items" col="4">
				<template #default="{ item }">
					<xl-icon :family="item.family" :name="item.icon" color="#0a93ff" size="30"></xl-icon>
				</template>
			</xl-grid>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const items = ref([
		{name: '待付款', icon: 'xl-pay', url: 'tabs'},						// 添加跳转路径
		{name: '待发货', icon: 'xl-pack', url: 'tabs', dot: true}, 			// 添加徽标点
		{name: '待收货', icon: 'xl-delivery', url: 'tabs', badge: 14},		// 添加徽标数字
		{name: '待评价', icon: 'xl-review', url: 'tabs', params: {cur: 2}},	// 添加路由参数
		{name: '待归还', family: 'xl-uni', icon: 'xl-uni-daiguihuan'},		// 使用自定义图标
		{name: '退款', icon: 'xl-shouhou'}									// 不跳转，
	])
	
	function clickItem(item){
		uni.$xl.toast(item.name)
	}
</script>

<style lang="scss" scoped>

</style>